<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-json.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>


<style>
 
/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}
   
#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
 
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  bgcolor:white;
  width:900px;
  height:750px;
}
</style>

<script>
$(document).ready(function() { 
	
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });    
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });        
     
});

function showImg(fileName){
    
    var newsrc = "upload/" + fileName;
    var myimg=document.getElementById('popimg');
    myimg.src = newsrc;
    
    var mytitle=document.getElementById('imgtitle');
    mytitle.value = fileName;
    //Get the screen height and width
    var maskHeight = $(document).height()*1/2;
    var maskWidth = $(window).width()*0.98;
 
    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});
     
    //transition effect    
    $('#mask').fadeIn(800);   
    $('#mask').fadeTo("slow",0.3); 
 
    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
           
    //Set the popup window to center
    $('#dialog').css('top',  winH/2-$('#dialog').height()/2+80);
    $('#dialog').css('left', winW/2-$('#dialog').width()/2);
 
    //transition effect
    $('#dialog').fadeIn(1000);
    
}
</script>

<title>Images List</title>
</head>
<body>

<div id="boxes">
     
    <!-- #customize your modal window here -->
 
    <div id="dialog" class="window">
    	<center>
    	<table bgcolor="black">
    		<tr><td><font color="white"><b><input id="imgtitle" value="Image" disabled></b></font>|</td><td><a href="#" class="close"><font color="white"><b>Close</b></font></a></td></tr>
    	</table>
        <!-- close button is defined as close class -->
        
        <img src="" id="popimg" width="540px" height="360px"/>
        
        
        </center>
    </div>
    
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div>
</div>

<center>
	<s:property value = "count"/> results found
	<p></p> 
	<table width="80%">
		<tr bgcolor="#DBF3FF">
		<td>Date Uploaded</td>
		<td>Uploader</td>
		<td>Gene Name</td>
		<td>Form Name</td>
		<td>File Name</td>
		<td>Operation</td>
		</tr> 
		<s:iterator value="imageList" id="user">
        <tr bgcolor="#E1EBED">
        	<td width="18%"><s:date name="dateModified" format="MM/dd/yyyy hh:mm:ss a"/></td>
        	<td width="5%"><s:property value = "user.userName"/></td>
        	<td width="10%"><s:property value = "geneName"/></td>
        	<td width="20%"><s:property value= "formName"/></td>
        	<td><a href="#" onclick="return showImg('<s:property value="%{fileName}"/>')"><s:property value= "fileName"/></a></td>
        	<s:url id="urlId" var="myurl" action="DeleteImage">
        		<s:param name="id"><s:property value="id"/></s:param>
        	</s:url>
        	<td width="5%"><!-- <a href="<s:property value="#myurl"/>">--><a href="#" onclick="return deleteImg('<s:property value="%{id}"/>')">Delete</a></td>
        </tr>
        </s:iterator>       
   </table>   
<br>
</center>
</body>
</html>